{include file="include:headerFile" /}
{include file="include:header" /}
{include file="include:banner" /}
<main>
    {volist name="pagePartList" id="pagePart"}

    {if $pagePart.name == 'product' }
    <section>
        <div class="index-pro-mid">
            <div class="index-pro-kuang w1600">
                <div class="index-pro-k-top">
                    <div class="index-pro-top-left">
                        <p class="indexbj-pro-top-bj">
                            <img src="/static/images/nptitlebj.png" alt="{$systemInfo.title}"/>
                        </p><span class="index-pro-top-biaoti">
                                        PRODUCTS                                    </span>
                        <p class="index-pro-top-title">
                            Industrial-Grade Outdoor Lighting Systems
                        </p>
                        <p class="index-pro-top-ertitle">

                            Smart LED solutions with ISO-certified durability, engineered for
                            infrastructure, landscapes and harsh industrial environments.
                        </p>
                    </div><a class="index-pro-top-right" href="/products.html" title="">
                    Go to all Products                              </a>
                </div>
                <div class="index-pro-table">
                    <ul class=" list-paddingleft-2">
                        {volist name='$productCatList' id='vo'}
                        <li class="{if $i == 1} active {/if}">
                            {$vo.name} <span><img src="/static/images/npright.png" alt="{$vo.name}"/></span>
                        </li>
                        {/volist}
                    </ul>
                    <div class="index_pro_tableswiper">
                        {volist name='$productCatList' id='vo'}
                        <div class="index-pro-tabkuang">
                            <div class="swiper mySwiper tableswiper">
                                <div class="swiper-wrapper">
                                    {volist name='$vo.productList' id='pro' length="4"}
                                    <div class="swiper-slide">
                                        <a class="index-pro-table-k" href="/{$pro.rewrite_url}.html">
                                            <p class="index-pro-img">
                                                <img src="{$pro.photo}" alt="{$pro.name}">
                                            </p>
                                            <p class="index-pro-xl">
                                                {$pro.series}
                                            </p>
                                            <p class="index-pro-title">
                                                {$pro.name}
                                            </p>
                                            <p class="index-pro-xh">
                                                {$pro.model}
                                            </p>
                                            {$pro.desc | raw}
                                            {notempty name="$pro.characteristic_text"}
                                            <div class="index-pro-jnname">
                                                {volist name="$pro.characteristic_text" id="v"}
                                                <p>
                                                    {$v}
                                                </p>
                                                {/volist}
                                            </div>
                                            {/notempty}
                                        </a>
                                    </div>
                                 
                                    {/volist}
                                </div>
                                <div class="swiper-pagination"></div>
                            </div>
                        </div>
                        {/volist}
                    </div>
                </div>
            </div>
        </div>
    </section>
    {elseif $pagePart.name == 'contact' /}

    <!-- 联系我们按钮 -->
    {include file="include:contactusbottom" /}

    {elseif $pagePart.name == 'news' /}

    {notempty name='cmsList'}
    <section>
        <div class="index-news-mid">
            <div class="index-news-kuang w1600">
                <div class="index-pro-k-top">
                    <div class="index-pro-top-left">
                        <p class="indexbj-pro-top-bj">
                            <img src="/static/images/nptitlebj.png" alt="{$navData.seo_title}"/>
                        </p>
                        <p class="index-pro-top-title">
                            News
                        </p>
                    </div>
                    <a class="index-pro-top-right" href="/company-news.html" title="HlPO">
                            Dive&nbsp;Deeper
                    </a>
                </div>
                <div class="index-news-list">
                    {volist name="cmsList" id="vo"}

                    <a class="index-news-k" href="/{$vo.rewrite_url}.html">
                        <p class="index-news-img">
                            <img src="{$vo.photo}" alt="{$vo.title}" />
                        </p>
                        <p class="index-news-k-title">{$vo.title}</p>
                        <p class="index-news-k-data">{$vo.show_time|date="Y-m-d"} - Category : {$vo.cmsCat.name}</p>
                        <p class="index-news-k-nr">{:strip_tags($vo.content)}</p>
                        <p class="quan-annu" href="" title="">
                                        <span class="tubiao">
                                            <!-- <img src="images/npyuan.png" alt="" /> -->
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 56" width="100%" height="100%" fill="none"><path fill="currentColor" fill-rule="evenodd" d="M50.624 44.169A28.028 28.028 0 0 1 28 55.583c-15.464 0-28-12.443-28-27.792C0 12.443 12.536 0 28 0c11.94 0 22.136 7.419 26.161 17.866h-.858C49.318 7.866 39.49.794 28 .794 12.978.794.8 12.881.8 27.791S12.978 54.79 28 54.79a27.226 27.226 0 0 0 21.626-10.62h.998Z"/></svg>
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="14" height="14" viewBox="0 0 14 14"><g><g></g><g></g><g><path d="M10.78242,3.783268L10.78284,3.782843Q10.8391,3.726582,10.86955,3.653073Q10.9,3.5795649,10.9,3.5Q10.9,3.420435,10.86955,3.346926Q10.8391,3.273418,10.78284,3.217157Q10.78101,3.215327,10.779160000000001,3.21352Q10.72314,3.158931,10.650680000000001,3.129465Q10.57822,3.1,10.5,3.1L10.49557,3.100025Q10.417159999999999,3.100893,10.34488,3.131301Q10.2726,3.1617100000000002,10.21716,3.217157L3.217157,10.21716Q3.160896,10.27342,3.130448,10.34693Q3.1,10.42043,3.1,10.5Q3.1,10.50961,3.100462,10.519210000000001Q3.107885,10.67357,3.217157,10.78284Q3.273418,10.8391,3.346927,10.86955Q3.420435,10.9,3.5,10.9Q3.5795649,10.9,3.653073,10.86955Q3.726582,10.8391,3.782843,10.78284L3.783268,10.78242L10.78242,3.783268Z" fill-rule="evenodd" fill="currentColor" fill-opacity="1"/></g><g><path d="M10.100059070587157,3.900000238418579L10.100059070587157,9.19000023841858Q10.100059070587157,9.22940023841858,10.107749070587158,9.268040238418578Q10.115429070587158,9.30668023841858,10.13050907058716,9.34307023841858Q10.145579070587157,9.37947023841858,10.167469070587158,9.41223023841858Q10.189359070587159,9.44498023841858,10.21721907058716,9.472840238418579Q10.245069070587158,9.50070023841858,10.277829070587158,9.52259023841858Q10.31058907058716,9.54447023841858,10.346989070587158,9.559550238418579Q10.383379070587157,9.574630238418578,10.422019070587158,9.582310238418579Q10.460659070587159,9.590000238418579,10.50005907058716,9.590000238418579Q10.539459070587158,9.590000238418579,10.578099070587157,9.582310238418579Q10.616739070587158,9.574630238418578,10.653129070587159,9.559550238418579Q10.68952907058716,9.54447023841858,10.72228907058716,9.52259023841858Q10.75503907058716,9.50070023841858,10.782899070587158,9.472840238418579Q10.810759070587158,9.44498023841858,10.83264907058716,9.41223023841858Q10.854529070587159,9.37947023841858,10.869609070587158,9.34307023841858Q10.884689070587157,9.30668023841858,10.892369070587158,9.268040238418578Q10.900059070587158,9.22940023841858,10.900059070587158,9.19000023841858L10.900059070587158,3.500000238418579Q10.900059070587158,3.460603638418579,10.892369070587158,3.4219641384185793Q10.884689070587157,3.383324238418579,10.869609070587158,3.346927238418579Q10.854529070587159,3.310529238418579,10.83264907058716,3.2777722384185792Q10.810759070587158,3.245015238418579,10.782899070587158,3.217157238418579Q10.75503907058716,3.1893002384185793,10.72228907058716,3.167412238418579Q10.68952907058716,3.1455252384185792,10.653129070587159,3.130448238418579Q10.616739070587158,3.115372238418579,10.578099070587157,3.1076862384185793Q10.539459070587158,3.100000238418579,10.50005907058716,3.100000238418579L4.810059070587158,3.100000238418579Q4.770662470587158,3.100000238418579,4.732022970587158,3.1076862384185793Q4.693383070587158,3.115372238418579,4.656986070587158,3.130448238418579Q4.620588070587158,3.1455252384185792,4.587831070587158,3.167412238418579Q4.555074070587159,3.1893002384185793,4.5272160705871585,3.217157238418579Q4.4993590705871584,3.245015238418579,4.477471070587158,3.2777722384185792Q4.455584070587158,3.310529238418579,4.4405070705871585,3.346927238418579Q4.425431070587158,3.383324238418579,4.417745070587158,3.4219641384185793Q4.410059070587158,3.460603638418579,4.410059070587158,3.500000238418579Q4.410059070587158,3.539396838418579,4.417745070587158,3.578036338418579Q4.425431070587158,3.616676238418579,4.4405070705871585,3.653073238418579Q4.455584070587158,3.6894712384185793,4.477471070587158,3.722228238418579Q4.4993590705871584,3.754985238418579,4.5272160705871585,3.7828432384185793Q4.555074070587159,3.810700238418579,4.587831070587158,3.832588238418579Q4.620588070587158,3.854475238418579,4.656986070587158,3.869552238418579Q4.693383070587158,3.8846282384185793,4.732022970587158,3.892314238418579Q4.770662470587158,3.900000238418579,4.810059070587158,3.900000238418579L10.100059070587157,3.900000238418579Z" fill-rule="evenodd" fill="currentColor" fill-opacity="1"/></g></g></svg>
                                        </span>
                            <span class="quan-annu-nr">
                                            View more
                                        </span>
                        </p>
                    </a>
                    {/volist}
                </div>
            </div>
        </div>
    </section>
    {/notempty}
    {else /}

    {$pagePart.content|raw}

    {/if}

    {/volist}
</main>


{include file="include:footer" /}
{include file="include:footerFile" /}
<!-- autoplay: true, -->
<script>

    var bannerswiper = new Swiper(".bannerswiper", {
        effect: 'fade',
        fadeEffect: {
            crossFade: true
        },
        pagination: {
            el: ".bannerswiper .swiper-pagination",
            clickable: true,
        },
    });
    var hzhbswiper = new Swiper(".hzhbswiper", {
        slidesPerView: 3,
        spaceBetween: 10,
        autoplay: true,
        breakpoints: {
            451: {
                slidesPerView: 5,
                spaceBetween: 10,
            },
            769: {
                slidesPerView: 6,
                spaceBetween: 40,
            },
            992: {
                slidesPerView: 8,
                spaceBetween: 40,

            },
            1440: {
                slidesPerView: 8,
                spaceBetween: 60,
            },
        },
    });

    $(".index_pro_tableswiper > .index-pro-tabkuang").hide();
    $(".index_pro_tableswiper > .index-pro-tabkuang").eq(0).show()
    $(".index-pro-table >ul li").hover(function () {
        var num = $(".index-pro-table > ul li").index(this);
        $(".index_pro_tableswiper > .index-pro-tabkuang").hide();
        $(".index_pro_tableswiper > .index-pro-tabkuang").eq(num).show();
        $(this).addClass("active");
        $(this).siblings().removeClass("active");

        // 强制更新当前显示 swiper（避免白屏）
        if (tableSwipers[num]) {
            tableSwipers[num].update();
        }
    })
    // Swiper 实例数组
    var tableSwipers = [];
    // 遍历每一个 swiper 容器
    $(".tableswiper").each(function (index, element) {
        // 检查 element 是否为有效的 DOM 元素
        if (element && element instanceof HTMLElement) {
            // 检查内部是否有 swiper-wrapper（Swiper 结构必须）
            if ($(element).find('.swiper-wrapper').length > 0) {
                tableSwipers[index] = new Swiper(element, {
                    slidesPerView: 1,
                    spaceBetween: 28,
                    observer: true,
                    observeParents: true,
                    pagination: {
                        el: ".tableswiper .swiper-pagination",
                        clickable: true,
                      },
                    breakpoints: {
                        1400: {
                            slidesPerView: 2,
                            spaceBetween: 28,
                        },
                        992: {
                            slidesPerView: 1.6,
                            spaceBetween: 28,
                        },
                        769: {
                            slidesPerView: 1.3,
                            spaceBetween: 28,
                        }
                    }
                });
            }
        }
    });

    var indexsolutionswiper = new Swiper(".indexsolutionswiper", {
        slidesPerView: 1,
        spaceBetween: 10,
        centeredSlides: true,
        initialSlide: 1,
        breakpoints: {
            992: {
                slidesPerView: 1.3,
                spaceBetween: 10,
            },
        }
    });
    $(".index-why-bottom-kuang").hover(function () {
        $(this).addClass("active").siblings().removeClass("active")
    })

</script>
</body>
</html>